<!DOCTYPE html>
<html>
	<head>
		<title>Spindle</title>
		<link rel="stylesheet" type="text/css" href="/static/css/spindle.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/editor.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/confirm.css" />
		<script type="text/javascript" src="/static/js/jquery-1.6.js"></script>
		<script type="text/javascript" src="/static/js/underscore.js"></script>
		<script type="text/javascript" src="/static/js/backbone.js"></script>	
		<script type="text/javascript" src="/static/js/spindle.js"></script>
		<script type="text/javascript" src="/static/js/set-csrf-header.js"></script>

<!-- Templates -->

    <script type="text/template" id="list-link-template">
    	<a href=""><span class="title"><%= title %></span></a>
    </script>
    
	<script type="text/template" id="item-template">
		<div class="item <%= done ? 'done' : '' %>">
			<div class="display">
				<!--<input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />-->
				<div class="item-name"><%= name %></div>
				<div class="item-content">{% autoescape off %}<%= content %>{% endautoescape %}</div>
				<span class="item-destroy"></span>
			</div>
			<div class="edit-item-block">
				<div class="edit-item">
				    <div class="edit">
					    <input class="edit-item-name" type="text" />
			    	</div>
			    </div>
				<div id="item-editor<%= id %>">
					<div class="edit-buttons">
						<span class="save button"><a href="">Save</a></span>
						<span class="cancel button"><a href="">Cancel</a></span>
					</div>
				</div>
			</div>
        </div>
    </script>
    
    <script type="text/template" id="public-item-template">
		<div class="item <%= done ? 'done' : '' %>">
			<div class="display">
				<div class="item-name"><%= name %></div>
				<div class="item-content">{% autoescape off %}<%= content %>{% endautoescape %}</div>
			</div>
        </div>
    </script>
    
    <script type="text/template" id="photo-template">
    	<a href="<%= original_img_url %>"><img src="<%= thumb_url %>"></a>
    	<div class="edit">
    		<span class="photo-delete">x</span>
    	</div>
    </script>

	<script type="text/template" id="list-builder-template">
		<div id="list-title-block">
			<div class="list-title">
				<h1 class="display"><%= title %></h1>
				<div class="edit">
					<input id="title-input" type="text" value="<%= title %>" />
    			</div>
   	 		</div>
		</div>
		<div id="create-item-block">
			<div id="create-item" class="clearfix">
			    <span class="new-item button display"><a href="">New Item</a></span>
			    <a href="#" id="pick-files" class="upload-photo button display">Upload Photo</a>
			    <div class="edit">
				    <input id="new-item" placeholder="Name of new item..." type="text" />
					<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
		    	</div>
		    </div>
			<div id="editor">
				<div class="edit-buttons">
					<span class="save-new-item button"><a href="">Save</a></span>
					<span class="cancel-new-item button"><a href="">Cancel</a></span>
				</div>
			</div>
		</div>
		<div class="photos-block">
			<!--<form enctype="multipart/form-data" method="post">
			   	<input type="file" />
			  	<input type="submit" value="submit" />
			</form>-->
			<ul id="photos"></ul>
			<div id="filelist"></div>
		</div>
		<div class="content">
        	<div id="items">
          		<ul id="item-list"></ul>
        	</div>
        	<div id="item-stats">
        	</div>
    	</div>		
		<ul id="instructions">
   			<li>Double-click to edit an item.</li>
   			<li>Drag and drop to reorder.</li>
		</ul>
	</script>

	<script type="text/template" id="list-browser-template">
		<div id="list-title-block">
			<div class="list-title">
				<h1 class="display"><%= title %></h1>
   	 		</div>
		</div>
		<div class="photos-block">
			<!--<form enctype="multipart/form-data" method="post">
			   	<input type="file" />
			  	<input type="submit" value="submit" />
			</form>-->
			<ul id="photos"></ul>
		</div>
		<div class="content">
        	<div id="items">
          		<ul id="item-list"></ul>
        	</div>
        	<div id="item-stats">
        	</div>
    	</div>
	</script>
	
    <script type="text/template" id="stats-template">
    	<% if (total) { %>
    		<span class="item-count">
    			<span class="number"><%= remaining %></span>
    			<span class="word"><%= remaining == 1 ? 'item' : 'items' %></span>.
        	</span>
        <% } %>
    </script>
    <!--
    <script type="text/template" id="stats-template">
    	<% if (total) { %>
    		<span class="item-count">
    			<span class="number"><%= remaining %></span>
    			<span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
        	</span>
        <% } %>
        <% if (done) { %>
        	<span class="item-clear">
          		<a href="#">Clear <span class="number-done"><%= done %></span>
            		completed <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span>
          		</a>
          	</span>
        <% } %>
    </script>
	-->
		{% block external %}{% endblock %}
	</head>
	<body>
		<div class=container_12>
			<div class="grid_4">
				<ul>
					<li><a href="/">Spindle</a></li>
				</ul>
			</div>
		 	<div class="grid_4 prefix_4">
				<ul id="nav">
				{% if user.is_authenticated %}
					<li><a href="/{{ user.username }}">{{ user.username }}</a></li>
					<li><a href="/logout/">logout</a></li>
				{% else %}
					<li><a href="/register/">Sign up</a></li>
					<li><a href="{% url django.contrib.auth.views.login %}?next=/">log in</a></li>
				{% endif %}
				</ul>
			</div>
			{% block content %}{% endblock %}
		</div>
	</body>
</html>